<template>
    <div>
        <el-form
            :inline="true"
            :model="lecture_query"
            class="demo-form-inline"
        >
            <el-form-item label="ID">
                <el-input
                    v-model="lecture_query.id"
                    placeholder="请输入ID"
                    clearable
                />
            </el-form-item>
            <el-form-item label="名称">
                <el-input
                    v-model="lecture_query.name"
                    placeholder="请输入名称"
                    clearable
                />
            </el-form-item>
            <el-form-item>
                <el-button
                    type="primary"
                    @click="onQuery"
                >查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button
                    type="primary"
                    @click="onReload"
                >重置</el-button>
            </el-form-item>
        </el-form>

        <el-table
            :data="dataList.comList"
            style="width: 100%"
        >
            <el-table-column
                label="ID"
                prop="id"
            />
            <el-table-column
                label="课程名"
                prop="lectureName"
            />
            <el-table-column align="right">
                <template #default="scope">
                    <el-button
                        size="small"
                        @click="handleDetail(scope.$index, scope.row)"
                    >详情</el-button>
                    <el-button
                        size="small"
                        type="primary"
                        @click="handlePublish(scope.$index, scope.row)"
                    >发布调查问卷</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @current-change="currentChange"
            @size-change="sizeChange"
            background
            layout="prev, pager, next"
            :total="data.selectData.count"
            :default-page-size="data.selectData.pagesize"
        />
    </div>


    <el-dialog
        v-model="dialogDetailVisible"
        title="课程详情"
        align-center
    >
        <el-descriptions :column="1">
            <el-descriptions-item label="课程名">
                {{ curRow?.lectureName }}
            </el-descriptions-item>

            <el-descriptions-item label="教师">
                {{ curRow?.teacherId }}
            </el-descriptions-item>

            <el-descriptions-item label="课程时间">
                {{ curRow?.lectureTime }}
            </el-descriptions-item>

            <el-descriptions-item label="课程地点">
                {{ curRow?.lecturePlace }}
            </el-descriptions-item>

            <el-descriptions-item label="课程内容">
                {{ curRow?.lectureContent }}
            </el-descriptions-item>

        </el-descriptions>

    </el-dialog>
</template>

<script lang="ts">
import {
    getCurrentInstance, inject, reactive,
    onMounted, computed, ref
} from "vue";
import { Lecture, LectureRules, lecture_query, LectureData, LectureListData } from "@/utils/staff_LectureValidators"
import { ElMessage } from 'element-plus'
export default {
    setup() {
        const dialogDetailVisible = ref(false);
        //@ts-ignore
        const { ctx } = getCurrentInstance();
        const axios = inject('axios');
        const data = reactive(new LectureListData());
        const curRow = ref<LectureData>();

        onMounted(() => {
            getLectureData();
        });

        const getLectureData = () => {
            //@ts-ignore
            axios.get("/api/lecture/queryList",
                {
                    params: {
                        deleted: false,
                    }
                    //@ts-ignore
                }).then((res) => {
                    if (res.status === 200) {
                        data.LectureList = res.data.data;
                        data.selectData.count = res.data.data.length;

                    } else {
                        alert("未请求到\"课程\"信息");
                    }
                });
        };

        const dataList = reactive({
            comList: computed(() => {
                return data.LectureList.slice(
                    (data.selectData.page - 1) * data.selectData.pagesize,
                    data.selectData.page * data.selectData.pagesize
                );
            }),
        });

        const currentChange = (page: number) => {
            data.selectData.page = page;
        };
        const sizeChange = (pagesize: number) => {
            data.selectData.pagesize = pagesize;
        };

        const handleDetail = (index: number, row: LectureData) => {
            console.log(index, row);
            dialogDetailVisible.value = true;
            curRow.value = row;
        }
        const handlePublish = (index: number, row: LectureData) => {
            ElMessage({
                message: '发布成功',
                type: 'success',
            })
        }

        interface QParams {
            deleted: boolean;
            id?: string;
            lectureName?: string;
        }

        const onQuery = () => {
            const { id, name } = lecture_query;
            let q_params: QParams = { deleted: false };
            var allowQuery = false;
            if (id != "" && /^[0-9]*$/.test(id)) {
                q_params.id = id;
                allowQuery = true;
            }
            if (name != "") {
                q_params.lectureName = name;
                allowQuery = true;
            }
            if (allowQuery) {
                //@ts-ignore
                axios.get("/api/lecture/queryList",
                    {
                        params: q_params
                        //@ts-ignore
                    }).then((res) => {
                        if (res.status === 200) {
                            data.LectureList = res.data.data;
                            data.selectData.count = res.data.data.length;
                        } else {
                            alert("未请求到\"课程\"信息");
                        }
                    });
            }
        };

        const onReload = () => {
            location.reload();
        }

        return {
            data, onQuery, lecture_query, dataList, currentChange, sizeChange,
            handlePublish, handleDetail, dialogDetailVisible, curRow,
            Lecture, LectureRules, onReload,
        }
    },
};
</script>

<style scoped>
.demo-form-inline .el-input {
    --el-input-width: 220px;
}

.dialog-footer button:first-child {
    margin-right: 10px;
}
</style>
